import React from 'react'

// components
import SysMsg from "./SysMsg/SysMsg"
import UserMsg from "./UserMsg/UserMsg"
import GiftMsg from "./GiftMsg/GiftMsg"
// import {ListView} from "antd-mobile";
import withDownload from "../../../../../../high-order-component/withDownload/withDownload";
import {log} from "../../../../../../utils/commonfunc";

class DialogueContainer extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            ctnHei: 0,
        }
    }

    componentDidMount() {
        this.scrollIntoView()
    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        const touched = this.props.inputTouched
        const touchedPrev = prevProps.inputTouched
        if (touched === true) return
        this.scrollIntoView()
    }

    scrollIntoView = () => {
        this.ctn.scrollIntoView({ behavior: "auto", block: "end" })
    }


    render() {
        const {dialogues,} = this.props
        const userMsgList = (dialogues.map((msg, index) => {
            const {c,} = msg
            const m = {
                1: (<UserMsg key={index} userMsg={msg}/>),
                2: (<GiftMsg key={index} giftMsg={msg} football={this.props.football}/>),
                3: (<SysMsg key={index} msg={msg} type='欢迎' />),
                // 4: (<SysMsg key={index} msg={msg} type='离开' />),
                4: null,
            }
            return m[c]
        }))
        const t = (
            <div
                ref={el => this.ctn = el}
                style={{
                    // height: height,
                    padding: this.props.together ? '104px 0 60px' : '0 0 60px',
                }}
            >
                <SysMsg type='封停' />
                {userMsgList}
            </div>
        )

        return t
    }
}


export default withDownload(DialogueContainer)

